<template>
  <Layout :is-tip-slide="layoutStatus.isTipSlide" :is-meteor="layoutStatus.isMeteor"
    :music-bottom-position="layoutStatus.musicButtonPosition" />
  <!-- <Enter v-if="ReportProgess[reportProgessKey] === 0" /> -->
  <!-- <transition name="fade"> -->
  <component :is="currentComponent" :stats="stats" @slide-up="ReportProgess[reportProgessKey] < 10 && handleNextPage()"
    @slide-down="
      ReportProgess[reportProgessKey] > 1 &&
      ReportProgess[reportProgessKey] < 11 &&
      handlePrePage()
      " @click-button="ReportProgess[reportProgessKey] >= 10 && handleNextPage()" :keyword="stats?.keyword"
    @enter="ReportProgess[reportProgessKey] === 0 && handleNextPage()"
    :loading="ReportProgess[reportProgessKey] === 0 && statsLoading" />
  <!-- </transition> -->
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted, computed } from "vue";
import { ReportProgess } from "@/enums/report";
import { getYearReportStats } from "@/api/report";
import { initCordovaConfig } from "@/utils/base/base-init";
import { changeStatusBarColor } from "@/cordova/common";
import { initChanganInfo } from "@/utils/base/changan-info-util";
import { Toast } from "vant";
import { getUserStats, setUserStats } from "@/utils/base/common-storage";
import { formatReportStats } from "@/utils/report/fomatRawData";

let honorFlag = false;
let hrFlag = false;
onMounted(async () => {
  initCordovaConfig();
  changeStatusBarColor([68, 168, 252, 1]);
  await initChanganInfo();


  if (getUserStats()) {
    stats.value = getUserStats();
    statsLoading.value = false;
  } else {
    const raw = await getYearReportStats()
      .catch(() => {
        Toast.fail("获取用户信息失败");
      })
      .finally(() => {
        statsLoading.value = false;
      });

    if (raw.code === 200) {
      console.log("raw", raw);
      stats.value = await formatReportStats(raw);
      setUserStats(stats.value);

    } else {
      Toast.fail(raw.msg || "请求失败");
    }
  }
  const { hrStandGrade, hrPosition, hrProfessionalCompetence, honor6sigmaProject, intent, utility, design, honorSoftwareCopyright } = stats.value.honorData;
  hrStandGrade || hrPosition || hrProfessionalCompetence || honor6sigmaProject || intent || utility || design || honorSoftwareCopyright
    ? (honorFlag = true)
    : (honorFlag = false);

  const { mobileDays, lastNight } = stats.value.hr;
  mobileDays || lastNight ? (hrFlag = true) : (hrFlag = false);
  console.log("----stats----", stats.value);
});

const stats = ref();
const statsLoading = ref(false);

const layoutStatus = reactive({
  isTipSlide: true,
  isMeteor: true,
  musicButtonPosition: "high" as "high" | "low",
});

const reportProgessKey = ref<keyof typeof ReportProgess>("Enter");
const reportProgessStep = ref(0);

// // 监听是否在进入页面，layout样式做修改
watch(
  reportProgessKey,
  (n) => {
    layoutStatus.isMeteor = n !== "Enter";
    layoutStatus.isTipSlide = n !== "Enter" && n !== "Melody" && n !== "Share";
    layoutStatus.musicButtonPosition = n === "Enter" ? "low" : "high";
  },
  {
    immediate: true,
  }
);

const handleNextPage = () => {
  console.log("handleNext page", reportProgessStep.value);
  // 之前的逻辑，应该是为了跳过没有数据的页面
  if (
    (reportProgessStep.value === 8 &&
      !honorFlag) || (reportProgessStep.value === 4 && !hrFlag)
  ) {
    console.log("12323")
    reportProgessStep.value++;
  }
  reportProgessStep.value++;
  reportProgessKey.value = ReportProgess[reportProgessStep.value] as any;
};

const handlePrePage = () => {
  if (reportProgessStep.value !== 0) {
    if ((reportProgessStep.value === 10 && !honorFlag) || (reportProgessStep.value === 6 && !hrFlag)) {
      reportProgessStep.value--;
    }
    reportProgessStep.value--;
    reportProgessKey.value = ReportProgess[reportProgessStep.value] as any;
  }
};

const currentComponent = computed(() => {
  switch (ReportProgess[reportProgessKey.value]) {
    case 0:
      return "Enter";
    case 1:
      return "Hello";
    case 2:
      return "Ichangan";
    case 3:
      return "Event";
    case 4:
      return "Join";
    case 5:
      return "HrPage";
    // case 6: return 'Work';
    // case 7: return 'Attendance';
    // case 8: return 'Partner';
    case 6:
      return "Travel";
    case 7:
      return "Ilearning";
    case 8:
      return "CaHome";
    case 9:
      return "Honor";
    case 10:
      return "WishPool";
    // case 10: return 'Melody';
    // case 11: return 'Share';
    default:
      return "";
  }
});
</script>

<script lang="ts">
import Layout from "@/components/Layout/index.vue";
import Enter from "./components/Enter/index.vue";
import Hello from "./components/Hello/index.vue";
import Ichangan from "./components/Ichangan/index.vue";
import Event from "./components/Event/index.vue";
import Join from "./components/Join/index.vue";
import HrPage from "./components/Hr/index.vue";
// import System from "./components/System/index.vue";
// import Work from "./components/Work/index.vue";
// import Attendance from "./components/Attendance/index.vue";
// import Partner from "./components/Partner/index.vue";
import Travel from "./components/Travel/index.vue";
import Ilearning from "./components/Ilearning/index.vue";
import CaHome from "./components/CaHome/index.vue";
import Honor from "./components/Honor/index.vue";
import WishPool from "./components/WishPool/index.vue";

import Melody from "./components/Melody/index.vue";
import Share from "./components/Share/index.vue";

export default {
  name: "ReportPage",
  components: {
    Layout,
    Enter,
    Hello,
    Ichangan,
    Event,
    Join,
    HrPage,
    // System,
    // Work,
    // Attendance,
    // Partner,
    Travel,
    Ilearning,
    CaHome,
    Honor,
    WishPool,
    Melody,
    Share,
  },
};
</script>

<style lang="scss" scoped>
div {
  color: red;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
